<template>
        <el-carousel trigger="click"  arrow="always" >
            <el-carousel-item v-for="item in topImagesList" :key="item">
                <img :src="item" alt="" class="img" @load="detaiLoad">
            </el-carousel-item>
        </el-carousel>
</template>

<script>
export default {
    props:{
        topImagesList:{
            type:Array
        }
    },
    data () {
        return {
            isLoadOnce:true
        }
    },
    methods:{
        detaiLoad(){
            if(this.isLoadOnce){
                 this.$emit('detailImageLoad')
            }
            this.isLoadOnce=false
            }
            }
};
</script>

<style lang="less" scoped>
// .el-carousel{
//     img{
//         width: 100%;
//     }
    
//     .el-carousel__button{
//     width: 14px;
//     height: 14px;
//     border-radius: 14px;
//   }
    
// }


.el-carousel__indicator--horizontal{
 width: 14px;
 height: 14px;
border-radius: 14px;
}
// .el-carousel__button {
   
//   }
  .el-carousel__container {
    height: 300px;
  }
 
  .img{
    width:100%;
  }


</style>

